<template>
    <div id="videoPlayer" :info="getVideoInfoValue">
    </div>

</template>

<script setup name="VueVideoPlayComponent" lang="ts">
import Player from 'xgplayer';
import HlsPlugin from 'xgplayer-hls';
import 'xgplayer/dist/index.min.css';
import {reactive, computed, defineProps, onMounted, onUnmounted, ref} from "vue";
import {doThirdServiceValue} from "@/utils/lowcode/thirdService";

let props = defineProps(['propJson', 'commonParam']);
let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let player = ref(null);

function execVideoInfoThen(resValue) {
    const config = {
        id: "videoPlayer",
        url: resValue + "?type=inline",
        lang: 'zh',       // 中文界面
        plugins: [HlsPlugin],
        hls: {            // HLS专属配置（超时/重试）
            retryCount: 3,      // 最大重试次数
            retryDelay: 1000,   // 重试间隔(ms)
            loadTimeout: 10000  // 请求超时时间(10秒):cite[1]:cite[6]
        },
        width: propJson.value.width, // 播放器宽度
        height: propJson.value.height, // 播放器高度
        volume: propJson.value.volume, // 初始音量（范围 0-1）
        loop: propJson.value.loop, // 是否循环播放
    };
    player.value = new Player(config);
}

onMounted(async () => {
    const config = {
        id: "videoPlayer",
        url: "",
        lang: 'zh',       // 中文界面
        plugins: [HlsPlugin],
        hls: {            // HLS专属配置（超时/重试）
            retryCount: 3,      // 最大重试次数
            retryDelay: 1000,   // 重试间隔(ms)
            loadTimeout: 10000  // 请求超时时间(10秒):cite[1]:cite[6]
        },
        width: propJson.value.width, // 播放器宽度
        height: propJson.value.height, // 播放器高度
        volume: propJson.value.volume, // 初始音量（范围 0-1）
        loop: propJson.value.loop, // 是否循环播放
    };
    player.value = new Player(config);
});

onUnmounted(() => {
    player.value?.destroy(); // 销毁实例
});


let getVideoInfoValue = computed(async () => {
    if (propJson.value.editFlag) {
        return;
    }
    await doThirdServiceValue(propJson.value.videoSrcValueParam, commonParam.value, execVideoInfoThen, () => {}, null)
})

</script>

<style scoped>

</style>